<template>
	<view>
		<view>
			<view>
				<image class="container" :src="get_img+bgFunc()"></image>
			</view>
			<view>
				<view style="padding: 20rpx 10rpx 0pt 80rpx;height: 30rpx;width:600rpx;">
					<u-search placeholder="请输入关键字" :actionStyle="actionStyle" v-model="where.keyword" @custom="search">
					</u-search>

				</view>
			</view>
			<view style="padding-top: 130rpx;">
				<!-- <wyb-drop-down 
				ref="dropDown" 
				:options="options" 
				@change="onHeaderSelect" 
				@select="onItemSelect"
				:max-height="400"
				>
				</wyb-drop-down> -->
			</view>
			<view>
				<view style="margin-top: -15rpx;">
					<image class="img1" :src="get_img+sys.active_icon" @click="nav('/pages/active/active')"></image>
					<!-- <p style="position: absolute;top:380rpx;color: #fff;padding-left: 80rpx;">游戏中心</p> -->
					<image class="img2" :src="get_img+sys.custom_icon" @click="nav('/pages/adviser/adviser')"></image>
					<!-- <p style="position: absolute;top:380rpx;color: #fff;padding-left: 460rpx;">置业顾问</p> -->
				</view>
			</view>
		</view>
			<view style="font-weight: 700;font-size: 40rpx;margin: 100rpx 0 20rpx 30rpx;">
				楼盘推荐
			</view>
			<view>
				<u-line color="#8e8e8e"></u-line>
			</view>


		<!-- <view style="font-size: 45rpx;margin:120rpx 0 0 20rpx;">在售楼盘</view> -->
		<view class="sell">
			<view v-for="(item,index) in list" :key="index" @click="house(item)">
				<!-- <view class="gg" style="padding-top: 290rpx;">
					<p>{{item.name}}</p>
					<p style="font-size: 22rpx;color: darkgrey;">{{item.short_name}}</p>
				</view> -->
				<view style="height: 310rpx;">
					<view>
						<!-- <image class="sell_image" :src="get_img+item.icon"></image> -->
						<u--image mode="scaleToFill" :src="get_img+item.icon" radius="15rpx" width="348rpx" height="250rpx"></u--image>
						<view class="sell_icon1">
							<view class="sell_icon">在售</view>
						</view>

					</view>
					<view class="sell_a">
						<view class="sell_name">{{item.name}}</view>
						<view class="sell_m">约{{item.price}}元/m<span class="sb">2</span>起</view>
						<view class="sell_p">{{item.pay_num||0}}人想买</view>
						<view class="sell_d">{{item.address}}</view>
						<span class="p1" v-for="(item1,index1) in item.label" :key="index1" v-if="index1<2">{{item1}}</span>
					</view>
					<!-- <view style="float: right;padding-right: 25rpx;text-align: center;height: 25rpx;">
						<p :class="'p'+(index1+1)" v-for="(item1,index1) in item.label" :key="index1" v-if="index1<3">
							{{item1}}</p>
					</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var _self;
	import wybDropDown from '@/components/wyb-drop-down/wyb-drop-down.vue'
	export default {
		components: {
			wybDropDown
		},
		data() {
			return {
				properties: [],
				sys: {},
				actionStyle: {
					Color: "#fff"
				},
				list: [],
				type: [],
				floor: [],
				reach: false,
				all_floor: [],
				get_img: this.$get_img,
				where: {
					pid: "",
					fid: "",
					type: "",
					keyword: "",
					page: 1,
					num: 5

				},
				options: [{
					header: '楼栋',
					// contents在自定义开启时可以不用传
					contents: ['A栋', 'B栋', 'C栋', 'D栋'],
					// custom: true // 该栏目开启自定义模式
				}, {
					header: '户型',
					contents: ['一室一厅', '两室两厅', '三室两厅', '四室两厅']
				}, {
					header: '楼栋',
					contents: []
				}]
			}

		},
		onLoad() {
			_self = this
			this.get_properties()
			this.get_type()
			this.get_data()
			this.sys = uni.getStorageSync("sys")
			this.get_floor()
		},
		onReachBottom() {
			if (!this.reach) {
				this.where.page++
				this.get_data()
			}

		},
		methods: {
			bgFunc() {
				return this.sys.project_nav_bg != '' ? this.sys.project_nav_bg : this.sys.sys_background
			},
			search() {
				this.reach = false
				this.list = []
				this.where.page = 1
				this.get_data()
			},
			get_data() {
				let url = "user/project/get_project?page=" + this.where.page + "&num=" + this.where.num + "&pid=" + this
					.where.pid + "&type=" + this.where.type + "&keyword=" + this.where.keyword
				this.$model.get(url).then(res => {
					if (res.code == 200) {
						if (res.data.data.length > 0) {
							res.data.data.forEach(function(value) {
								_self.list.push(value)
							})
						} else {
							_self.reach = true
						}

					}
				})
			},
			onHeaderSelect(e) {
				console.log(e)
			},
			change_floor() {
				let arr = []
				this.floor = []
				this.all_floor.forEach(function(value) {
					if (value.pid == _self.where.pid) {
						arr.push(value.name)
						_self.floor.push(value)
					}
				})
				_self.options[2]["contents"] = arr

			},
			get_floor() {
				this.$model.get("user/common/get_floor").then(res => {
					if (res.code == 200) {
						this.all_floor = res.data
						this.change_floor()
					}
				})
			},
			get_type() {
				this.$model.get("user/common/get_type").then(res => {
					_self.type = res.data
					let arr = []
					_self.type.forEach(function(value) {
						arr.push(value.name)
					})
					_self.options[1]["contents"] = arr

				})
			},
			get_properties() {
				this.$model.get("user/common/get_properties").then(res => {
					if (res.code == 200) {
						_self.properties = res.data
						let arr = []
						_self.properties.forEach(function(value) {
							arr.push(value.name)
						})

						_self.options[0]["contents"] = arr
					}
				})
			},
			onItemSelect(e) {

				this.options[e.headerIndex].header = e.content
				if (e.headerIndex == 0) {

					this.where.pid = this.properties[e.contentIndex].id
					this.change_floor()
				}
				if (e.headerIndex == 1) {
					this.where.type = this.type[e.contentIndex].id
				}
				if (e.headerIndex == 2) {
					this.where.fid = this.floor[e.contentIndex].id
				}

			},
			house(item) {
				uni.navigateTo({
					url: "/pages/house/house?id=" + item.id
				})
			}
		}
	}
</script>
<style>
	.container {
		width: 750rpx;
		height: 550rpx;
		z-index: -1; //换层
		position: absolute; //绝对定位
	}

	.ss {
		margin: 20rpx 0 0 200rpx;
		padding-left: 50rpx;
		z-index: 0; //换层
		position: absolute; //绝对定位
		border: 1px solid #c8cccf;
	}

	.img {
		height: 40rpx;
		width: 40rpx;
		float: left;
		margin: 27rpx 0 0 205rpx;
	}

	.j {
		height: 40rpx;
		width: 40rpx;
		float: right;
		padding: 30rpx 35rpx 0 0;
	}

	.img1 {
		width: 310rpx;
		height: 310rpx;
		padding-left: 40rpx;
	}

	.img2 {
		width: 310rpx;
		height: 310rpx;
		float: right;
		padding-right: 40rpx;
	}

	/* 	.gg {
		padding-top: 150rpx;
	} */

	.p1 {
		width: auto;
		background-color: #F4F4F4;
		text-align: center;
		margin-top: 10rpx;
		font-size: 23rpx;
		height: 40rpx;
		padding: 5rpx;
		border-radius: 10rpx;
		color: #92969B;
		margin-left: 10rpx;
	}
	.p2 {
		width: 220rpx;
		background-color: #f2a11a;
		text-align: center;
		margin-top: 20rpx;
		font-size: 25rpx;
		height: 40rpx;
		padding-top: 10rpx;
		border-radius: 10rpx;
		color: #FFFFFF;
	}

	.p3 {
		width: 220rpx;
		background-color: #00ccff;
		text-align: center;
		margin-top: 20rpx;
		font-size: 25rpx;
		height: 40rpx;
		padding-top: 10rpx;
		border-radius: 10rpx;
		color: #FFFFFF;
	}

	.sb {
		vertical-align: text-top;
		font-size: 12rpx;
	}

	.sell {
		padding-left: 20rpx;
		height: auto;
		width: auto;
		margin-top: 30rpx;
	}

	.sell_name {
		font-weight: 700;
		font-size: 40rpx;
		width: 380rpx;
		margin-left: 10rpx;
	}

	.sell_m {
		font-size: 28rpx;
		color: #FF5A56;
		margin: 15rpx 0rpx 0 10rpx;
		/* font-weight: 500; */
	}

	.sell_p {
		color: #828282;
		font-size: 23rpx;
		margin: 10rpx 0 5rpx 10rpx;
	}

	.sell_d {
		font-size: 26rpx;
		color: #828282;
		margin: 10rpx 0 10rpx 10rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.sell_a {
		float: right;
		padding-right: 41rpx;
		height: 255rpx;
		margin-top: -250rpx;
		width: 340rpx;
	}

	.sell_image {
		float: left;
		width: 350rpx;
		height: 255rpx;
		padding-top: 15rpx;
		border-radius: 15rpx;
	}

	.sell_icon {
		width: 70rpx;
		width: 80rpx;
		background-color: #007AFF;
		color: #FFFFFF;
		text-align: center;
		/* margin: -240rpx 0rpx 0 10rpx; */
		margin-top: -7rpx;
		border-radius: 10rpx;
		position: absolute;
	}

	.sell_icon1 {
		width: 80rpx;
		height: 50rpx;
		position: absolute;
		margin-top: -240rpx;
		margin-left: 10rpx;
	}
</style>
